<!DOCTYPE html>
<html>
<head>
    <title>loadMapSyncHTML</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
    <style type="text/css">
        .bottomRightOverlay{display: none}
        .letterbox{display:none}
        .bottomLeftOverlay{display:none}
    </style>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol'></script>
    <script type='text/javascript' src="star.js"></script>
    <script type='text/javascript'>
        var map,searchModule;
        function loadMap() {
            Microsoft.Maps.registerModule('CanvasOverlayModule', 'map.js');

            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: ' Aiw1SbZzfnxTkxUsWdxqx7dhv89obydjkgvmqMNRcOhkak0gxOjFhjMz066x5qy2',
                zoom: 1,
                disableScrollWheelZoom:true,
                disableZooming:true,
                showMapTypeSelector:false,
                center: new Microsoft.Maps.Location(35.027222, 150.0225),
                liteMode:true,
                enableClickableLogo:false,
                disablePanning:true,
                showLocateMeButton:false,
                mapTypeId:Microsoft.Maps.MapTypeId.canvasDark
            });

            var computers = JSON.parse("[{\"id\":\"158\",\"ip\":\"202.20.2.2\",\"lat\":\"113.25\",\"lng\":\"23.1167\",\"port\":\"10021\",\"status\":\"0\",\"ttl\":\"0\",\"user\":\"4\",\"zone\":\"中国\"},{\"id\":\"159\",\"ip\":\"9.8.8.7\",\"lat\":\"113.25\",\"lng\":\"23.1167\",\"port\":\"10021\",\"status\":\"0\",\"ttl\":\"0\",\"user\":\"4\",\"zone\":\"中国\"}]");

            Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
                searchModule = new Microsoft.Maps.Search.SearchManager(map);
                searchStar("新疆",7,searchModule)
            });
        }

        function searchStar(zone,nodes,searchModule){
            var request = {
                bounds: map.getBounds(),
                count:1,
                where: zone,
                callback: function (answer, userData) {
                    genStar(answer.results[0].location,nodes==null?0:nodes)
                }
            }
            searchModule.geocode(request)
        }

        function genStar(location,num){
            Microsoft.Maps.loadModule('CanvasOverlayModule', function () {
                //Implement the new custom overlay class.
                var overlay = new CanvasOverlay(function (canvas) {
                    //Calculate pixel coordinates of locations.
                    var points = map.tryLocationToPixel(location, Microsoft.Maps.PixelReference.control);
                    var ctx = canvas.getContext("2d");
                    var st =  new Star({x:points.x,y:points.y,ctx:ctx,num:num});
                    doRender(canvas,st);
                    //Draw circles for each location.

                });

                //Add the custom overlay to the map.
                if(overlay!=null){
                    map.layers.insert(overlay);
                }

            });
        }
    </script>
</head>
<body onload='loadMap()'>
<div id='printoutPanel'></div>

<div id='myMap' style='width: 1140px; height: 600px;background-color: #333'></div>
</body>


</html>